
  <template>
  <div class="bf-commont-template clearfix">
    <!-- <div style="padding: 0 16px ;">
      <h3>节假日管理</h3>
      <p>该页面代码已经自动生成，按照普通码 表增删改查 为基础生成模板</p>
      <p>生成代码对应的 vue 文件路径：D:\Zmyitem\vue-element-admin\src\beneform4j\view\parammanager\holiday.vue</p>
      <el-alert title="注意：表格内数据为模拟数据, 如果数据格式不对，请先进行格式转换。 模拟数据文件路径：src/mock/demo.js" type="warning"> </el-alert>
    </div> -->
    <div class="container  clearfix">
      <div class="float-l calendar  clearfix">
        <div class="calendar-header clearfix ">
          <div class="float-l pre-month" @click="gotPreMonth">
            <span class="fas fa-angle-left"></span>
          </div>
          <div class="float-l year-detail relative" @click="showDatePick">
            <div class="date-pick" >
              <el-date-picker
                v-model="datePick"
                @change="dateChange"
                value-format="yyyyMM"
                type="month"
                ref="datePick"
                placeholder="选择月">
              </el-date-picker>
            </div>
            <span>{{curYear}}</span>年<span>{{curMonth}}</span>月
          </div>
          <div class="float-l last-month" @click="gotNextMonth">
            <span class="fas fa-angle-right"></span>
          </div>
        </div>
        <div class="calendar-week clearfix padding-b">
          <div>一</div>
          <div>二</div>
          <div>三</div>
          <div>四</div>
          <div>五</div>
          <div>六</div>
          <div>日</div>
        </div>
        <div class="calendar-day clearfix padding-b">
          <div v-for="item in monthData" :key="item.key" class="calendar-daliy margin-b padding-b  relative" @click="showEdit(item)">
            <div class="sun-day" v-if="!item._preMonth">
              <div :class="item.solarDate == dayId ? 'today' : ''">{{item.monthDays}}</div>

            </div>
            <div class="lunar-date" v-if="!item._preMonth">{{item.holidayDesc}}</div>
            <span class="holiday" v-if="item.isHolidayDay == '1'">休</span>
          </div>
        </div>
      </div>
      <div class="float-l clendar-info">
        <div class="show-today shadow">
          <div class="title-day relative">
            <img src="../../../../assets/beneform4j/holiday/day_icon_bg.png" alt="">
            <div class="day-year-month">{{yearMonth}}</div>
            <div class="day-today">{{today}}</div>
          </div>
          <div class="day-week">
            {{todayWeek}}
          </div>
        </div>
      </div>
      <div class="float-l clendar-info poem-container">
        <div>
          <img src="../../../../assets/beneform4j/holiday/day_bg_illustrator.png" alt="">
        </div>
        <div class="poem">
          <p>
            时机从不会”失掉”，你失掉了，自有他人会失掉。不必凡事在天，刻舟求剑，更不必寄希望于“时间”。时机只仅仅是绝对充沛预备而又擅长缔造时机的人而言。
          </p>
          <div>——来自《生活节选》</div>
        </div>
      </div>
    </div>
    <!-- <div class="float-l">
      hellos
    </div> -->
    <!-- 编辑 -->
    <bf-table-edit :editRules="editRules"  :editForm ='addSetting' ref='editRef' @formSubmit='editSubmit'></bf-table-edit>
  </div>
</template>

<script>
import {
  getMonthHolidayApi,
  updateHolidayApi,
  updateWorkdayApi,
  generatorYearDayApi
} from './api';
import { addSetting } from './holiday.setting';
export default {
  data() {
    return {
      searchData: '',
      monthData: [],
      curMonth: 0,
      curYear: 0,
      addSetting: addSetting,
      editRules: {
        isHolidayDay: [{ required: true, message: '请输入用户名称', trigger: 'blur' }]
      },
      datePick: '',
      dayId: '',
      yearMonth: '',
      today: '00',
      todayWeek: '星期一'
    };
  },
  mounted: function() {
    const date = new Date();
    const year = date.getFullYear();
    let month = date.getMonth() + 1;
    if (month < 10) {
      month = '0' + month;
    }
    const monthId = '' + year + '-' + month;
    let today = date.getDate();
    if (today < 10) {
      today = '0' + date.getDate();
    }
    this.today = today
    this.yearMonth = year + '年' + month + '月'
    this.todayWeek = '星期' + '日一二三四五六'.charAt(date.getDay());
    this.dayId = monthId + '-' + today
    this.getMonthHoliday(year + '-' + month)
  },
  methods: {
    dateChange() {
      const year = this.datePick.slice(0, 4);
      const month = this.datePick.slice(4, 6);
      this.getMonthHoliday(year + '-' + month);
    },
    showDatePick() {
      this.$refs.datePick.showPicker();
    },
    showEdit(item) {
      this.$refs.editRef.show(item);
    },
    gotNextMonth() {
      const year = Number(this.curYear);
      const month = Number(this.curMonth);
      if (month === 12) {
        const y = year + 1;
        const dayId = '' + y + '-01';
        this.getMonthHoliday(dayId);
      } else {
        const m = month + 1;
        let dayId;
        if (m < 10) {
          dayId = '' + year + '-0' + m;
        } else {
          dayId = '' + year + '-' + m;
        }
        this.getMonthHoliday(dayId);
      }
    },
    gotPreMonth() {
      const year = Number(this.curYear);
      const month = Number(this.curMonth);
      if (month === 1) {
        const y = year - 1;
        const dayId = '' + y + '-12';
        this.getMonthHoliday(dayId);
      } else {
        const m = month - 1;
        let dayId;
        if (m < 10) {
          dayId = '' + year + '-0' + m;
        } else {
          dayId = '' + year + '-' + m;
        }
        // console.log(dayId)
        this.getMonthHoliday(dayId);
      }
    },
    initMonth(date) {},
    generatorYearData(date) {
      const year = date.slice(0, 4);
      generatorYearDayApi(year).then(response => {
        if (response.success) {
          const month = date.slice(5, 7);
          this.getMonthHoliday(year + '-' + month);
        }
      });
    },
    getMonthHoliday(date) {
      this.curYear = date.slice(0, 4);
      this.curMonth = date.slice(5, 7);
      getMonthHolidayApi(date).then(Response => {
        if (!Response.success) {
          return;
        }
        this.monthData = Response.data;
        if (this.monthData.length == 0) {
          this.generatorYearData(date);
          return;
        }
        this.monthData.forEach(v => {
          // v._lunarDes = v.lunarDesc.split('月')[1]
        });
        const week = this.monthData[0].week;
        switch (week) {
          case '星期一':
            break;
          case '星期二':
            this.pushPreDays(1);
            break;
          case '星期三':
            this.pushPreDays(2);
            break;
          case '星期四':
            this.pushPreDays(3);
            break;
          case '星期五':
            this.pushPreDays(4);
            break;
          case '星期六':
            this.pushPreDays(5);
            break;
          case '星期日':
            this.pushPreDays(6);
            break;
        }
      });
    },
    pushPreDays(number) {
      for (let i = 0; i < number; i++) {
        this.monthData.unshift({
          _preMonth: true
        });
      }
    },
    editSubmit(params) {
      if (params.isHolidayDay === '2') {
        const obj = {
          solarDate: params.solarDate,
          isHolidayDay: '2'
        };
        updateHolidayApi(obj).then(response => {
          if (response.success) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.$refs.editRef.hidden();
            const dayId = obj.solarDate.slice(0, 7);
            this.getMonthHoliday(dayId);
          }
        });
      }
      if (params.isHolidayDay === '1') {
        if (!params.holidayDesc) {
          params.holidayDesc = '';
        }
        const obj = {
          solarDate: params.solarDate,
          isHolidayDay: '1',
          holidayDesc: params.holidayDesc
        };
        updateWorkdayApi(obj).then(response => {
          if (response.success) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.$refs.editRef.hidden();
            const dayId = obj.solarDate.slice(0, 7);
            this.getMonthHoliday(dayId);
          }
        });
      }
      this.$refs.editRef.hidden();
    },
    pageChange(pageObj) {
      // console.log(pageObj)
    },
    showSearch() {
      this.$refs.table.showSearch();
    },
    showAdd() {
      this.$refs.table.showAdd();
    },
    quickSearch() {
      // const params = {
      //   userId: this.searchData
      // };
      // console.log(params);
    }
  }
};
</script>

<style scoped>
.bf-commont-template {
  margin: 0 16px;

}
.calendar {
  width: 50%;
  border-right: none;

}
.container{
  margin-top: 70px;
  border-radius: 4px;
  height: 498px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
  background-image: linear-gradient(to bottom, #fff , #fcfcfc);
}
.calendar-week {
  color: #80848f;
  font-weight: bold;
  margin-bottom: 20px;
}
.calendar-header {
  padding: 16px 0;
  margin-bottom: 16px;
}
.calendar-week > div,
.calendar-day > div {
  float: left;
  width: 14.28%;
  text-align: center;
}

.lunar-date {
  font-size: 12px;
  color: #aaa;
  padding-top: 4px;
  height: 17px;
}
.calendar-daliy {
  cursor: pointer;
  font-size: 14px;
}
.sun-day {
  height: 30px;
  line-height: 30px;
}
.sun-day > div {
  height: 30px;
  width: 30px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  transition: 0.25s ease all;
}
.calendar-daliy:hover .sun-day > div {
  color: #fff;
  background: #0099ff;
}
.pre-month {
  text-align: right;
}
.last-month {
  text-align: left;
}
.pre-month,
.last-month {
  width: 35%;
  cursor: pointer;
  line-height: 27px;
}
.last-month:hover {
  color: #0099ff;
}
.pre-month:hover {
  color: #0099ff;
}
.year-detail {
  width: 30%;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}
.year-detail:hover {
  color: #0099ff;
}
.holiday {
  font-size: 12px;
  position: absolute;
  top: 6px;
  left: 12px;
  padding: 2px;
  border-radius: 10px;
  background: rgb(255, 153, 0);
  color: #fff;
}
.date-pick {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  left: 80px;
}
.today {
  color: #fff;
  background: #0099ff;
}
.clendar-info {
  width: 25%;
  height: 100%;
  text-align: center;
}
.poem{
  padding: 0 16px;
}
.poem>p{
  line-height: 32px;
  text-align: left;
}
.poem>div{
  text-align: right;
}
.poem-container{
  margin-top: 30px;
}
.show-today{
  width: 168px;
  margin: 0 auto;
  border-radius: 4px;
  height: 183px;
  margin-top: 160px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
}
.title-day{
  padding-top: 16px;
}
.day-year-month{
  position: absolute;
  top: 44px;
  color: #fff;
  left: 46px;
}
.day-week{
  padding-top: 4px;
}
.day-today{
  position: absolute;
  top: 70px;
  left: 56px;
  font-weight: bold;
  font-size: 48px;
}
</style>
